<template>
	<div class="swiper-container">
		<div class="swiper-wrapper">
			<slot></slot>
		</div>
		<!-- 如果需要分页器 -->
		<div class="swiper-pagination"></div>
	</div>
</template>

<script>
	import Swiper from 'swiper'

	export default {
		name: 'LunBo',
		components: {
			Swiper,
		},
		data: function() {
			return {
				items: [1,2,3]
			}
		},
		methods: {
			_initSwiper() {
				var mySwiper = new Swiper('.swiper-container', {
					direction: 'horizontal', // 垂直切换选项
					loop: true, // 循环模式选项

					// 自动切换
					autoplay: {
						delay: 2000, //1秒切换一次
					},

					// 如果需要分页器
					pagination: {
						el: '.swiper-pagination',
					},
				})
			}
		},
		mounted() {
			this._initSwiper();
		}
	}
</script>

<style>
	/* 导入出错 */
	@import "./../../../node_modules/swiper/css/swiper.css";

	.swiper-container {
		width: 100%;
		height: 200px;
	}

	.swiper-container img {
		width: 100%;
		height: 200px;
	}

	.swiper-pagination-bullet-active {
		background: rgb(0, 164, 182);
	}
</style>
